<template>
    <el-form :model="form" ref="form" :rules="rules" class="form">
        <el-form-item class="form-item" prop="username">
            <el-input placeholder="用户名手机" v-model="form.username"> </el-input>
        </el-form-item>

        <el-form-item class="form-item" prop="captcha">
            <el-input placeholder="验证码" v-model="form.captcha">
                <template slot="append">
                    <el-button @click="handleSendCaptcha">
                        发送验证码
                    </el-button>
                </template>
            </el-input>
        </el-form-item>

        <el-form-item class="form-item" prop="nickname">
            <el-input placeholder="你的名字" v-model="form.nickname"> </el-input>
        </el-form-item>

        <el-form-item class="form-item" prop="password">
            <el-input placeholder="密码" type="password" v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item class="form-item" prop="checkPassword">
            <el-input placeholder="确认密码" type="password" v-model="form.checkPassword"> </el-input>
        </el-form-item>

        <el-button class="submit" type="primary" @click="handleRegSubmit">
            注册
        </el-button>
    </el-form>
</template>

<script>
    import {sendCaptcha, register} from './user'
    export default {
      data() {
        // 由于校验函数只是在 data 使用
        // 可以不需要写在 method
        
        const validateCheckPass = (rule, value, callback) => {
            // callback 这个形参是 Element 传入的一个固定回调函数
            // 校验完成就需要执行
            // 1. 如果校验合法, 直接执行, 没有参数
            // 2. 如果不合法, 就要带上一个错误对象参数 new Error('两次密码必须相同')
            if (!value) {
              callback(new Error('请输入必填信息'))
            }else if (value != this.form.password) {
              callback(new Error('两次密码必须一致'))
            }else {
              callback()
            }
        }

        return {
          form: {
            username: '',
            nickname: '',
            captcha: '',
            password: '',
            checkPassword: ''
          },
          rules: {
            username: [
              {
                required: true,
                message: '请输入必填信息',
                trigger: 'blur'
              }
            ],
            nickname: [
              {
                required: true,
                message: '请输入必填信息',
                trigger: 'blur'
              }
            ],
            captcha: [
              {
                required: true,
                message: '请输入必填信息',
                trigger: 'blur'
              }
            ],
            password: [
              {
                required: true,
                message: '请输入必填信息',
                trigger: 'blur'
              }
            ],
            checkPassword: [
              {
                // 这里的校验并非默认自带的校验方式
                // 而是需要自定义,所以 判断标准和提示语都要自己写
                // 给一个函数作为 valdator 即可
                validator: validateCheckPass,
                trigger: 'blur'
              }
            ]
          }
        }
      },
      methods: {
        handleSendCaptcha() {
          const regexp = /^1[3456789]\d{9}$/
          if (!regexp.test(this.form.username)) {
            return this.$message.error('请输入正确手机号')
          }

          sendCaptcha(this.form.username).then(res=>{
            console.log(res.data);
            if (res.data.code) {
              this.$message.success('成功获取验证码:' + res.data.code)
            }
          })

        },
        handleRegSubmit() {
          console.log(this.form);
          // 全局校验表单是否填写完毕
          // 填写完毕再发送
          this.$refs.form.validate().then(isValid=>{
            if (isValid) {
              // const data = {
              //   username: this.form.username,
              //   nickname: this.form.nickname,
              //   captcha: this.form.captcha,
              //   password: this.form.password,
              // }
              // 可以用 ... 拿出剩余数据
              const {checkPassword, ...data} = this.form

              register(data).then(res=>{
                console.log(res.data);
                if (res) {
                  // this.$store.commit('userstore/setUserInfo', res.data)
                  // this.$message.success('注册成功')
                  // this.$router.push('/')
                  // 第二种操作可以是跳转登录表单进行登录
                  // 因为这个注册表单,跟登录表单同属于 login.vue 页面的子组件, 自己没法切换
                  // 需要通知父组件
                  this.$message.success('注册成功')
                  this.$emit('toLogin')
                }
              })
            }
          })
        }
      }
    };
</script>

<style scoped lang="less">
    .form{
        padding:25px;
    }

    .form-item{
        margin-bottom:20px;
    }

    .form-text{
        font-size:12px;
        color:#409EFF;
        text-align: right;
        line-height: 1;
    }

    .submit{
        width:100%;
        margin-top:10px;
    }
</style>